<template>
  <!-- 充值 -->
  <view class="recharge">
    
    <view class="">
      <view class="top">
        <view class="status_bar">
                        <!-- 这里是状态栏 -->
        </view>
        <view class="fan" @tap="fan"><image src="../../../static/images/fh.png" mode="">充值</image></view>    
        <view class="zhong" >
          充值中心</view>
      </view>
      <view class="main">
        <view class="title">充值金额</view>
        <view class="input">
          <text>￥</text><input type="text" placeholder="请输入充值金额" />
        </view>
        <view class="content">
          <text class="left">充值方式</text>
          <text class="right">微信支付</text>
        </view>
        <button type="default">确认充值</button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
  	data() {
  		return {
        
  		};
  	},
  
  	onLoad() {
  		
  	},
  	mounted() {
     
  	},
  	methods: {	
       fan(){
              uni.navigateTo({
                  url:"/pages/user/menu/wallet"
              })
          }
  	}
  };
  
</script>

<style lang="scss">
  .recharge{
    background-color: #F6F6F6;
    width: 100%;
    padding-bottom: 520rpx;
  }
  .status_bar {
          height: var(--status-bar-height);
          width: 100%;
  }
  .top{
    width: 100%;
    height: 500rpx;
    color: white;
    background: linear-gradient(to right, #FA6E3F, #FEAB55);
    .fan{
      padding:0 30rpx;
      image{
      width:20rpx;
      height: 30rpx;
      padding-right: 20rpx;
      vertical-align: middle;
    }
  }
  .zhong{   
      text-align: center;
      line-height: 400rpx;
      font-size: 42rpx;
      font-weight: bold;
    }  
  }
  .main{
    width: 600rpx;
    height: 550rpx;
    margin:0 auto;
    background-color: white;
    border-radius:20rpx ;
    position: relative;
    bottom: 100rpx;
    padding:30rpx 40rpx;
    overflow: hidden;
    .title{
      
    }
    .input{
      border-bottom: 1rpx solid #C0C0C0;
      overflow: hidden;
      padding:30rpx 5rpx;
      margin-top:30rpx;
      text{
        float: left;
      }
      input{
        width: 500rpx;
        // border: 1px solid red;
        
      }
    }
    .content{
      overflow: hidden;
      margin-top:50rpx;
      .left{
        float: left;
      }
      .right{
        float: right;
        color: #888888;
      }
    }
    button{
      width: 580rpx;
      margin:0 auto;
      color: white;
      background: linear-gradient(to right, #FA6E3F, #FEAB55);
      border-radius: 50rpx;
      margin-top:150rpx;
      box-shadow: 1px 8px 8px 2px rgba(0, 0, 0, 0.1);
    }
  }
</style>
